<template>
  <!--
  ref:
    作用：原生标签获取dom,组件标签获取组件的this
    使用
       <xxx  ref="aaa" />
       父获取子组件的this   this.$refs.aaa====xxx组件的this

  $parent
      子获取父组件的this：  this.$parent===父组件的this
      它获取到的是自己最近的父组件

  $children:找到自己当前组件的子集组件，它是数组
  $root:找到根(main.js内的new Vue实例对象)组件实例对象
    使用：可以用于定义一些全局的变量属性方法等
 -->
  <div>
    <h2>我是父组件---{{ msg }}</h2>
    <button @click="btnClick">修改与获取hmson内的值</button>
    <button @click="btnClick2">找出所有的子集</button>
    <button @click="btnClick3">找出根组件</button>
    <hr />
    <el-card> </el-card>
    <HmSon ref="xxx"></HmSon>
  </div>
</template>
<script>
import HmSon from './components/HmSon.vue'
export default {
  data () {
    return {
      msg: '我是父组件'
    }
  },
  components: {
    HmSon
  },
  methods: {
    btnClick () {
      // 获取
      console.log(this.$refs.xxx.num)
      // 修改
      this.$refs.xxx.num++
    },
    btnClick2 () {
      console.log(this.$children)
    },
    btnClick3 () {
      console.log(this.$root)
    }
  }
}
</script>
<style></style>
